<template>
  <div>
    <div class="x-full">
      <div class="x-card-content">
        <dv-scroll-board :config="config" style="width: 100%;height:95%" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      config:{
        header: ['运维类别', '数值'],
        data: [
          ['养护', '100KM'],
          ['检测', '80KM'],
          ['维修', '80KM'],
          ['测绘', '80KM'],
          ['抢修', '80KM'],
          ['探测', '80KM'],
          ['开挖', '80KM'],
          ['未开挖', '80KM'],
        ],
        index: true,
        align: ['center'],
      }
    }
  }
};
</script>

<style scoped>
.x-full {
  width: 100%;
  height: 100%;
}
.x-card .x-card-content {
  height: calc(100% - 35px);
}
.rank-table {
  width: 100%;
  font-size: 13px;
  text-align: left;
}
table {
  border-collapse: collapse;
}
th {
  text-align: inherit;
}
.rank-table tbody tr:first-child .rank-icon {
  background: #ef4d45;
}
.rank-table .rank-icon {
  background: grey;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  display: inline-block;
  margin-right: 5px;
}
.rank-table th {
  padding: 10px 8px;
  font-size: 14px;
}
.rank-table td {
  padding: 9px 8px;
}
.rank-table tbody tr:nth-child(2) .rank-icon {
  background: #b06339;
}
.rank-table tbody tr:nth-child(3) .rank-icon {
  background: #187099;
}
</style>
